/* eslint-disable no-unused-vars */
import React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps, Link } from 'react-router-dom';
import actions from '@/store/actions/profile';
import { CombinedState } from '@/store/reducers';
import { ProfileState } from '@/store/reducers/profile';
import {
 Form, Input, Button, message
} from "antd";
import { UserAddOutlined, LockOutlined, MailOutlined } from "@ant-design/icons";
import NavHeader from '@/components/NavHeader';
import './index.scss';

const mapStateToProps = (state: CombinedState): ProfileState => state.profile;
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof actions;

interface Params{}
type Props = RouteComponentProps<Params> & StateProps & DispatchProps;
function Register(props: Props) {
    const onFinish = (value: any) => {
        props.register(value);
    };
    const onFinishFailed = (errorInfo: any) => {
        message.error(`表单验证失败! ${errorInfo}`);
    };
  return (
    <>
      <NavHeader history={props.history}>用户注册</NavHeader>
      <Form onFinish={onFinish} onFinishFailed={onFinishFailed} className="login-form">
        <Form.Item label="用户名" name="username" rules={[{ required: true, message: "请输入你的用户名！" }]}>
          <Input prefix={<UserAddOutlined />} placeholder="用户名" />
        </Form.Item>
        <Form.Item label="密码" name="password" rules={[{ required: true, message: "请输入你的密码！" }]}>
          <Input prefix={<LockOutlined />} type="password" placeholder="密码" />
        </Form.Item>
        <Form.Item label="确认密码" name="confirmPassword" rules={[{ required: true, message: "请输入你的确认密码！" }]}>
          <Input prefix={<LockOutlined />} type="password" placeholder="确认密码" />
        </Form.Item>
        <Form.Item label="邮箱" name="email" rules={[{ required: true, message: "请输入你的邮箱！" }]}>
          <Input prefix={<MailOutlined />} placeholder="邮箱" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">注册</Button>
          <Link to="/login">立刻登录!</Link>
        </Form.Item>
      </Form>
    </>
  );
}

export default connect(
    mapStateToProps,
    actions
)(Register);
